起初剛學到設定顏色時，都是使用background-color 來幫物件或是背景上色
於是在學到 gradient 時，超級興奮٩(ˊᗜˋ )و
竟然可以用這麼美的效果!!
興致沖沖的寫了

/*以下錯誤示範，好孩子不要學*/
background-color: linear-gradient(0deg, #f00 0%, #00f 100%);

嘛...(☉д⊙)..阿那ㄟ謀蒿???
看了一下配色網站提供的程式碼 https://cssgradient.io/
喔~原來是background

background: linear-gradient(0deg, #f00 0%, #00f 100%);

耶~成功了!!! < (￣︶￣)>

不求甚解、不知道有MDN、W3C網站的萌新馬上就遇到另一個問題
我想在漸層背景上面放圖片呀
於是又寫下了

/*錯誤示範*/
/*好孩子不要學*/
background: linear-gradient(0deg, #f00 0%, #00f 100%);
background-image: url(https://picsum.photos/id/237/200/300);
background-repeat: no-repeat;

嘛...(☉д⊙)...為什麼只剩圖片，漸層去哪裡了?哪裡不對呀...

困惑的新手在原地轉了很久的圈

現在想起這件事都想往自己頭上巴下去(笑)

首先在MDN網站上面說

The CSS data type is a special type of that consists of a progressive transition between two or more colors.

意思就是：gradient 屬於 image 的一種!!
應該使用的是background-image 而不是background-color

至於為什麼用background可以正常顯示呢
那是因為background是縮寫的意思
他涵蓋了以下的各種background屬性

• background-color
• background-image
• background-attachment
• background-repeat
• background-poition
• background-size

使用方法請拜讀這一篇-《Background - 金魚都能懂的CSS必學屬性》

裡面非常詳盡!我的啟蒙都是靠金魚XD
相信讀了就開竅了~~
那這邊就不再多做說明囉!

因此當我用background設定了漸層，又寫了background-image插入圖片時
自然後面寫的background-image會蓋過上面的background漸層

多重圖片設定

那麼像剛剛的情況要怎麼做出來呢?
這時候就可以用逗點分開圖片，一次進行多張圖片的設定

 background-image: 
    url(https://picsum.photos/id/237/200/300),
    linear-gradient(0deg, #f00 0%, #00f 100%);
    
 background-repeat: no-repeat;

圖片的層次並沒有限制，可以疊很多張~
寫在越後面的會疊在越下面
如圖所示

做照片的遮罩效果

除了單純做背景之外，漸層還有個很好用的地方
他可以對圖片做出遮罩的效果呀!
利用transparent透明+黑色下去漸層
這樣子滑鼠移動到圖片上也可以有不一樣的感覺啦~
codepen實作